<template>
  <div class="socket-container">
    <h3>WebSocket调试</h3>
    <p>需要执行yarn socket开始本地websocket服务</p>
    <p>发送close可让服务端断开socket</p>
    <input placeholder="请输入要发出的内容" v-model="words" />
    <div class="action">
      <button @click="send">发送</button>
      <button @click="close">暂停</button>
      <button @click="start">重新连接</button>
    </div>
    <p>{{ socketData }}</p>
  </div>
</template>

<script>
// websocket引入建议使用mixin,方便其他地方公用
import SocketMixin from '@/mixin/websocket'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const words = ref('')
    const { startSocket, closeSocket, socketSend, socketData } =
      SocketMixin()
    const start = () => {
      startSocket()
    }
    const send = () => {
      socketSend(words.value)
    }
    const close = () => {
      closeSocket()
    }
    return {
      socketData,
      words,
      start,
      send,
      close
    }
  }
})
</script>

<style lang="less" scoped>
.socket-container {
  h3,
  p {
    text-align: center;
    padding: 10px 0px;
  }
  input {
    display: block;
    margin: 0 auto;
    border-radius: 4px;
    width: 94%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding: 0px 10px;
    border: 1px solid #f1f1f1;
  }
  .action {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    button {
      width: 100px;
      height: 40px;
      line-height: 40px;
      outline: none;
      text-align: center;
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
    }
    > button:nth-of-type(1) {
      background-color: rgb(51, 114, 209);
    }
    > button:nth-of-type(2) {
      background-color: rgb(228, 31, 5);
    }
    > button:nth-of-type(3) {
      background-color: rgb(5, 87, 36);
    }
  }
}
</style>
